<template>
  <!-- 需求单 -->
  <div>
    <!-- 第一行 -->
    <el-row>
      <el-col span="2.5">
        <el-button icon="el-icon-menu">
          黄金品类
        </el-button>
      </el-col>
      <!-- <el-col span="2.5">
        <el-button icon="el-icon-plus">
          <router-link to="/menu/newDemandOrder"
                       tag="span">
            新增需求单
          </router-link>
        </el-button>
      </el-col> -->
      <el-col span="2.5">
        <el-button icon="el-icon-printer">
          导出
        </el-button>
      </el-col>
      <el-col span="6">
        <el-date-picker v-model="date"
                        type="daterange"
                        :default-time="['00:00:00', '23:59:59']"
                        format="yyyy-MM-dd"
                        value-format="timestamp"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @blur="searchDate" />
      </el-col>
      <el-col span="1">
        <div> &nbsp;</div>
      </el-col>
      <el-col span="4">
        <el-input v-model="input"
                  placeholder="请输入内容" />
      </el-col>
      <el-col span="2">
        <el-button type="primary"
                   icon="el-icon-search"
                   @click="search">搜索</el-button>

      </el-col>
      <el-col span="3">
        <el-button circle="true"
                   icon="el-icon-delete-solid" />
        <el-button circle="true"
                   icon="el-icon-refresh"
                   @click="refresh()" />

      </el-col>
    </el-row>

    <!-- 表格 -->

    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column prop="packingNumber"
                       align="center"
                       label="单号"
                       width="180" />
      <el-table-column prop="customer"
                       align="center"
                       label="客户"
                       width="100" />
      <el-table-column prop="warehouse"
                       align="center"
                       label="仓库"
                       width="100" />
      <el-table-column prop="weight"
                       align="center"
                       label="重量"
                       width="80" />
      <el-table-column prop="nums"
                       align="center"
                       label="数量"
                       width="100" />
      <el-table-column prop="createdTime"
                       align="center"
                       label="制单时间"
                       width="170">
        <template slot-scope="scope">
          {{scope.row.createdTime.substring(0, 19)
              .replace('T', ' ')}}
        </template>
      </el-table-column>
      <el-table-column prop="packingStatus"
                       align="center"
                       label="状态"
                       width="170" />
      <el-table-column prop="date"
                       align="center"
                       label="操作"
                       width="150">
        <template slot-scope="scope">
          <router-link :to="{path:'/amountDetail/'+ scope.row.packingNumber }">详情</router-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination :current-page="1"
                   :page-sizes="[10, 20, 30]"
                   :page-size="10"
                   :total="total"
                   style="float:right"
                   layout="total, sizes, prev, pager, next, jumper"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import findAll from '@/api/sale/amount/amount'
export default {
  inject: ['reload'],
  data () {
    return {
      input: '',
      date: '',
      // 需求单列表
      tableData: [],
      // 分页
      pageNum: 1,
      pageSize: 10,
      total: null,
      date: ['null', 'null']
    }
  },
  created () {
    // 展示需求表
    this.start()

  },
  methods: {
    detail (id) {
      // 跳转到需求单详情页面
      this.$router.push({ name: 'demandOrderDetails', query: { id: id } })
    },
    search () {
      // 按输入入库编号查
      // alert(this.date);
    },
    searchDate () {
      // 按时间查询
      this.start()
    },
    search () {
      // 清空
      this.tableData = []
      if (this.input == '') {
        this.$message.error('请输入查询信息')
        return
      }
      this.axios.get(this.baseUrl + 'requisitionForm/findOneByOrderNum', {
        params: {
          orderNum: this.input
        }
      }).then(res => {
        this.tableData.push(res.data.data)
        this.total = null
      })
    },
    // 刷新页面
    refresh () {
      this.reload()
    },

    // 分页
    handleSizeChange (val) {
      this.pageSize = val
      this.start()
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.start()
    },
    // 分页
    start () {
      findAll.findAll(this.pageNum, this.pageSize).then(result => {
        let data2 = result.data.list
        for (const i in data2) {
          //数据过滤
          //设置仓库
          if (data2[i].warehouse == 1) {
            data2[i].warehouse = 'A仓库'
          }
          if (data2[i].warehouse == 2) {
            data2[i].warehouse = 'B仓库'
          }
          if (data2[i].warehouse == 3) {
            data2[i].warehouse = 'C仓库'
          }
          //设置状态
          if (data2[i].packingStatus == 1) {
            data2[i].packingStatus = '编辑'
          }
          if (data2[i].packingStatus == 2) {
            data2[i].packingStatus = '待审核'
          }
          if (data2[i].packingStatus == 3) {
            data2[i].packingStatus = '进行中'
          }
          if (data2[i].packingStatus == 4) {
            data2[i].packingStatus = '完成'
          }
        }
        this.tableData = result.data.list
        console.log(this.tableData);

      })
    }
  }
}
</script>

<style scoped>
</style>
